<template>
    <page-wrapper>
        <div class="resume_block">
            <div class="block_header flex-row" @click="showBlock('isBasicInfo')">
                <a-icon class="activeItem" v-if="isBasicInfo" type="right-circle" theme="filled" />
                <a-icon class="activeItem" v-else type="down-circle" theme="filled" />
                <span class="title">基本信息</span>
            </div>
            <div class="resume_box flex-row" v-if="isBasicInfo">
                <div class="resume_avatar" v-if="info.sysEmp"><img class="avatar" :src="info.sysEmp.imageUrl" /></div>
                <div class="resume_info flex-column flex-item">
                    <a-row :gutter="16">
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">姓名：</span>
                            <!-- <span class="desc">
                                <a-input placeholder="请输入姓名" />
                            </span> -->
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.userName}}</template>
                                    {{info.userName}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">公司：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sysEmp?info.sysEmp.deptName:'无'}}</template>
                                    {{info.sysEmp?info.sysEmp.deptName:'无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <!-- <a-col :span="8" class="resume_item flex-row">
                            <span class="label">培训学时：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sysEmp?.deptName || ''}}</template>
                                    {{info.sysEmp?.deptName || ''}}
                                </a-tooltip>
                            </span>
                        </a-col> -->
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">年龄：</span>
                            <!-- <span class="desc">
                                <a-input-number style="width:100%;" :min="18" :step="1" placeholder="请输入年龄" />
                            </span> -->
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sysEmp?info.sysEmp.age:'无'}}</template>
                                    {{info.sysEmp?info.sysEmp.age:'无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">岗位：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sysEmp?info.sysEmp.post:'无'}}</template>
                                    {{info.sysEmp?info.sysEmp.post:'无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <!-- <a-col :span="8" class="resume_item flex-row">
                            <span class="label">工单积分：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">20</template>
                                    20
                                </a-tooltip>
                            </span>
                        </a-col> -->
                        <!-- <a-col :span="8" class="resume_item flex-row">
                            <span class="label">籍贯：</span>
                            <span class="desc">
                                <a-select style="width: 100%" placeholder="请选择籍贯">
                                    <a-select-option :value="native" v-for="(native, index) in natives" :key="index">
                                        {{ native }}
                                    </a-select-option>
                                </a-select>
                            </span>
                        </a-col> -->
                        <!-- <a-col :span="8" class="resume_item flex-row">
                            <span class="label">工种：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">集团员工</template>
                                    集团员工
                                </a-tooltip>
                            </span>
                        </a-col> -->
                        <!-- <a-col :span="8" class="resume_item flex-row">
                            <span class="label">公司排名：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">5</template>
                                    5
                                </a-tooltip>
                            </span>
                        </a-col> -->
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">邮箱：</span>
                            <!-- <span class="desc">
                                <a-input placeholder="请输入邮箱" />
                            </span> -->
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.email || '无'}}</template>
                                    {{info.email || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">入职时间：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sysEmp?info.sysEmp.entryTime:'无'}}</template>
                                   {{info.sysEmp?info.sysEmp.entryTime:'无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="8" class="resume_item flex-row">
                            <span class="label">手机：</span>
                            <!-- <span class="desc">
                                <a-input placeholder="请输入手机号" />
                            </span> -->
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.telephone || '无'}}</template>
                                    {{info.telephone || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="16" class="resume_item flex-row">
                            <span class="label">系统注册时间：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.createTime || '无'}}</template>
                                    {{info.createTime || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>

        <div class="resume_block flex-column">
            <div class="block_header flex-row" @click="showBlock('isResume')">
                <a-icon class="activeItem" v-if="isResume" type="right-circle" theme="filled" />
                <a-icon class="activeItem" v-else type="down-circle" theme="filled" />
                <span class="title">大事件</span>
            </div>
            <scroll-bar class="resume_tree flex-row" v-if="info.sysWorkerResume && info.sysWorkerResume.length">
                <div class="resume_node flex-column" v-for="(work) in info.sysWorkerResume" :key="work.id">
                    <p class="detail">
                        <a-tooltip placement="top">
                            <template slot="title">{{work.event}}</template>
                            {{work.event}}
                        </a-tooltip>
                    </p>
                    <span class="dot active_bg"></span>
                    <span class="time">{{work.createTime}}</span>
                </div>
            </scroll-bar>
            <a-empty v-else/>
        </div>

        <div class="footer_box">
            <a-button style="marginRight: 8px" @click="resetHandle">重置密码</a-button>
            <!-- <a-button type="primary" :loading="loading" @click="updateUserInfo">确定</a-button> -->
        </div>

        <a-modal v-model="isShow" width="540px" title="修改密码" ok-text="确认" cancel-text="取消" @ok="resetPassword">
            <a-form-model :model="securityFrom" :rules="securityRule" class="security-from" :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }" ref="securityFrom">
                <a-form-model-item prop="email" label="用户邮箱">
                    <a-input v-model="accountInfo.email" disabled placeholder="请输入邮箱地址" />
                </a-form-model-item>
                <a-form-model-item prop="verifycode" label="验证码">
                    <div class="flex-row">
                        <a-input v-model="securityFrom.verifycode" placeholder="请输入验证码" />
                        <a-button style="margin-left:10px;" type="primary" @click.prevent="getEmailCode"
                            :loading="codeLoading">获取验证码</a-button>
                    </div>
                </a-form-model-item>
                <a-form-model-item prop="newpassword" label="新密码">
                    <a-input-password ref="password" v-model="securityFrom.newpassword" placeholder="请输入新密码" />
                </a-form-model-item>
                <a-form-model-item prop="againPassword" label="确认密码">
                    <a-input-password ref="password" v-model="securityFrom.againPassword" placeholder="请输入确认密码" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>

    </page-wrapper>
</template>
<script>
import { provinces } from '@/views/staff/dictionary'
import { getCache } from '@/utils/session'
import { getResume } from '@/api/staff/labour';
import { remoteEmailCode,resetUserPassword,remoteUserResume } from '@/api/system/user'
import {rules} from './rules'
import { mapState } from 'vuex';

export default {
    name: 'Person',
    data() {
        var validatePwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.securityFrom.newpassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            info: {},
            loading: false,
            provinces,
            isBasicInfo: true,
            isResume: true,
            natives: [],
            isShow: false,
            codeLoading:false,
            securityFrom: {
                verifycode:'',
                newpassword: '',
                againPassword: ''
            },
            securityRule: rules(validatePwd)
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        let userInfo = getCache('userInfo') || { userId: '' };
        let { userId } = userInfo;
        this.getResumeInfo(userId)
        this.getNativeList();
    },
    methods: {
        showBlock(type) {
            // this[type] = !this[type];
        },
        getNativeList() {
            let natives = Object.values(this.provinces);
            this.natives = natives;
        },
        //更新用户信息
        async updateUserInfo() {
            //2-4个中文字符正则
            let reg_user = /^[\u4e00-\u9fa5]{2,4}$/;
            //2-50 特殊字符
            let reg_name = /^((?!\+|\.|\\|\/|:|\*|\?|\!|<|>|\||'|%|@|#|&|\$|\^|&|\*).){2,50}$/;
            //邮箱正则
            let reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            //11位手机号码正则
            let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            
        },
        resetHandle() {
            this.isShow = true;
        },
        //重置密码
        resetPassword() {
            this.$refs.securityFrom.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let { verifycode, newpassword } = this.securityFrom;
                        await resetUserPassword(verifycode, newpassword);
                        this.$message.success('修改成功！');
                        await this.$store.dispatch('user/logout', false);
                        let tenant = getCache('tenant') || 'master';
                        this.$router.replace({
                            path: `/${tenant}/login`
                        });
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        //获取邮箱验证码
        async getEmailCode(){
            try{
                this.codeLoading = true;
                let {email} = this.accountInfo;
                let res = await remoteEmailCode(email);
                this.$message.success('验证码已发送至邮箱！');
            }finally{
                this.codeLoading = false;
            }
        },
        //获取用户简历
        async getResumeInfo(id) {
            this.loading = true;
            try {
                let res = await remoteUserResume(id);
                this.info = res.data;
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.footer_box {
    text-align: right;
}

.resume_block {
    margin-bottom: 30px;
    padding: 10px;
    background: #fafafa;

    .block_header {
        align-items: center;
        font-size: 14px;

        .activeItem {
            font-size: 16px;
        }

        .title {
            margin-left: 10px;
            color: #333;
        }
    }

    .resume_box {
        margin: 10px;
        flex: 1;

        .resume_avatar {
            flex-shrink: 0;
            margin-right: 40px;
            width: 190px;
            height: 210px;
            background: #333;

            .avatar {
                width: 100%;
                height: 100%;
            }
        }

        .resume_info {
            .resume_item {
                align-items: center;
                height: 32px;
                margin-bottom: 12px;
            }

            .desc {
                flex: 1;
                width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    ::v-deep .scrollbar__wrap {
        width: 100%;
        margin-bottom: 20px !important;
        overflow-y: hidden;

        .scrollbar__view {
            display: flex;
            flex-direction: row;
            background: none;
        }
    }

    .resume_tree {
        flex: 1;
        margin: 40px 20px 20px;

        .resume_node {
            position: relative;
            padding: 0 20px;
            flex: 1;
            min-width: 200px;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 27px;
                right: 0;
                height: 2px;
                background: #000;
                z-index: 0;
            }

            &:nth-child(1)::after {
                left: 40px;
            }

            &:last-child:after {
                left: 0;
                width: 40px;
                right: auto;
            }

            .detail {
                height: 40px;
                font-size: 14px;
                color: #000;
                overflow: hidden; //超出文本隐藏
                text-overflow: ellipsis; //溢出显示省略号
                display: -webkit-box; //设置为弹性盒子
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; //只显示两行
            }

            .dot {
                position: relative;
                margin-left: 20px;
                margin-top: 24px;
                width: 16px;
                height: 16px;
                border-radius: 100%;
                background-color: #fff;
                border: 2px solid #000000;
                z-index: 1;
            }

            .time {
                margin-top: 8px;
                font-size: 12px;
                color: #666;
            }
        }
    }
}</style>
